<template>
	<view class="question-exam">
		<!-- 剩余时间 -->
		<view class="remain-time">{{pageObj.remainExamTime}}</view>
		<view class="block" v-if="!pageObj.loading">
			<!-- 问题类型 -->
			<view class="type" :class="pageObj.classObj[pageObj.list[pageObj.questionIndex].optionType]">{{pageObj.list[pageObj.questionIndex].optionType === 2 ? '多选题' : '单选题'}}</view>
			<!-- 问题 -->
			<view class="title">{{(pageObj.questionIndex + 1) + '. ' + pageObj.list[pageObj.questionIndex].questionContent}}</view>
			<!-- 选项 -->
			<view class="options">
				<view class="o-item" :class="item.select ? 'selected' : ''" v-for="(item, idx) in pageObj.list[pageObj.questionIndex].optionInfoList" :key="item.optionLetter" @click="onOptionTap(idx)">
					<view class="o-item-letter">{{item.optionLetter}}</view>
					<span>{{item.optionContent}}</span>
				</view>
			</view>
			<!-- 题目操作 -->
			<view class="opts">
				<view class="previous" @click="onChangeTap('previous')" v-if="pageObj.questionIndex > 0">上一题</view>
				<view class="next" @click="onChangeTap('next')" v-if="pageObj.questionIndex < pageObj.list.length">下一题</view>
			</view>
			<!-- 底部 -->
			<view class="footer">
				<!-- <view class="sequence" @click="pageObj.showMenu = true">
					<image class="menu-icon" src="../../static/images/question/menu.png"></image>
					{{pageObj.questionIndex}}/{{pageObj.list.length}}
				</view> -->
				<view class="post-btn" @click="onPostTap">提交试卷</view>
			</view>
		</view>
		<!-- 所有题目排序 -->
		<!-- <view class="popup" v-if="pageObj.showMenu" @click.prevent.self="pageObj.showMenu = false">
			<view class="block">
				<view class="p-header">
					<image class="menu-icon" src="../../static/images/question/menu.png"></image>
					{{pageObj.questionIndex}}/{{pageObj.list.length}}
					<image class="close-icon" src="../../static/images/common/close.png" @click="pageObj.showMenu = false"></image>
				</view>
				<view class="menu-list">
					<view class="menu-item" :class="item.selected ? 'finished' : ''" v-for="(item, idx) in pageObj.list" :key="item.id" @click="onSelectQuestionTap(idx)">{{idx + 1}}</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { requestErrorTip, loginExam } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					showMenu: false, // 菜单弹窗显示状态
					loading: false, // 加载状态
					classObj: {
						'1': 'single',
						'2': 'multiple',
						'3': 'single'
					},
					examId: '', // 考试id
					subjectId: '', // 科目id
					questionIndex: 0, // 考题排号
					remainExamSecond: 0, // 剩余时间(秒)
					remainExamTime: '',
					list: [] // 题目排序
				},
				dataObj: {
					questionId: '', // 考题id
					type: 'single', // 默认单选
					questionContent: '', // 考题题目
					optionInfoList: [], // 考题选项
				}
			}
		},
		onLoad(event) {
			this.pageObj['loading'] = true;
			const title = event['title']; // 获取科目名称
			this.pageObj['examId'] = event['examId']; // 获取考试id
			this.pageObj['subjectId'] = event['subjectId']; // 获取科目id
			uni.setNavigationBarTitle({
			　　title: title
			});
			// 获取问卷数据
			this.getExamData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getExamData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 渲染页面显示的题目
			// initPageQuestion() {
			// 	const index = this.pageObj['questionIndex'];
			// 	let data = this.pageObj['list'][index];
			// 	data['type'] = data['optionType'] === 2 ? 'multiple' : 'single';
			// 	this.pageObj['questionIndex'] = data['sort'] - 1;
			// 	console.log(data, 'data');
			// 	// this.dataObj = data;
			// 	this.pageObj['list'][index] = data;
			// },
			// 选项点击事件
			onOptionTap(index) {
				let data = this.pageObj['list'][this.pageObj['questionIndex']];
				const type = this.pageObj.classObj[data['optionType']];
				console.log(type, 'type');
				if (type === 'single') {
					// 单选
					data['optionInfoList'].forEach((item, i) => {
						if(i === index) {
							item['select'] = true;
						} else {
							item['select'] = false;
						}
					});
				} else {
					// 多选
					data['optionInfoList'][index]['select'] = !data['optionInfoList'][index]['select'];
				}
			},
			// 跟换页面题目(上一题、下一题的更换操作)
			onChangeTap(param) {
				if (!param) return false;
				this.postAnswer();
				if (param === 'previous') {
					// 不能小于0
					if (this.pageObj['questionIndex'] <= 0) return false;
					this.pageObj['questionIndex']--;
					// this.getExamData();
					// this.initPageQuestion();
				} else if (param === 'next') {
					// 不能大于题目总数
					if (this.pageObj['questionIndex'] >= this.pageObj.list.length) return false;
					this.pageObj['questionIndex']++;
					// this.initPageQuestion();
				}
			},
			// 选择题目
			// onSelectQuestionTap(index) {
			// 	this.questionIndex = index + 1;
			// 	this.initPageQuestion();
			// 	this.pageObj['showMenu'] = false;
			// },
			// 提交试卷
			onPostTap() {
				uni.showModal({
					title: '提示',
					content: '确定提交考卷吗？',
					confirmColor: '#FE6B00',
					success: (res) => {
						if (res.confirm) {
							// 确认
							this.postExam();
						}
					}
				});
			},
			// 提交考试
			postExam() {
				this.$Requset({
					url: this.$Api['exam']['submitExam'],
					data: {
						token_exam: uni.getStorageSync('examToken'),
						studentId: uni.getStorageSync('studentId'),
						subjectId: this.pageObj['subjectId'],
						examId: this.pageObj['examId'],
					},
					success: (res) => {
						const { data, status, message } = res;
						if (!status) {
							requestErrorTip('toast', message);
							return;
						}
						if (status === 103) {
							const userInfo = uni.getStorageSync('userInfo');
							const mobile = userInfo['mobile'];
							loginExam(mobile, () => {
								this.postExam();
							});
							return;
						}
						uni.navigateTo({
							url: './result'
						});
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取考试
			getExamData() {
				console.log('getExamData');
				this.$Requset({
					url: this.$Api['exam']['getExamQuestionInfo'],
					data: {
						token_exam: uni.getStorageSync('examToken'),
						studentId: uni.getStorageSync('studentId'),
						examId: this.pageObj['examId']
					},
					method: 'POST',
					success: (res) => {
						const { data, status, message } = res;
						if (!status) {
							requestErrorTip('toast', message);
							return;
						}
						if (status === 103) {
							const userInfo = uni.getStorageSync('userInfo');
							const mobile = userInfo['mobile'];
							loginExam(mobile, () => {
								this.getExamData();
							});
							return;
						}
						this.pageObj['loading'] = false;
						// const questionInfo = data['questionInfo'];
						this.pageObj['list'] = data['questionInfoList'];
						this.pageObj['remainExamSecond'] = data['remainExamSecond'];
						// this.initPageQuestion();
						// 考试倒计时
						this.countRemainExamSecond();
						// if (!this.dataObj['list'].length) {
						// 	this.dataObj['list'] = data['menuSortInfoList'];
						// }
						// this.dataObj['questionId'] = questionInfo['questionId'];
						// this.dataObj['questionIndex'] = questionInfo['sort'];
						// this.dataObj['title'] = questionInfo['questionContent'];
						// this.dataObj['optionInfoList'] = questionInfo['optionInfoList'].filter((item) => {
						// 	item['select'] = false;
						// 	return item;
						// });
						// this.getSelectedIndex(questionInfo['studentAnswer']);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取选中的下标值
			getSelectedIndex(str) {
				if (str === undefined || str === 'undefined') return;
				const selectArr = str.split(',');
				for(const index in selectArr) {
					const value = selectArr[index];
					this.dataObj['optionInfoList'].forEach((item) => {
						if(item['optionLetter'] === value) {
							item['select'] = true;
						}
					});
				}
			},
			// 提交答案
			postAnswer() {
				const index = this.pageObj['questionIndex'];
				const data = this.pageObj['list'][index];
				let selectAnswer = '';
				console.log(index, 'index');
				console.log(data, 'data');
				data['optionInfoList'].forEach((item) => {
					console.log(item, 'item');
					if (!item.select) return;
					if (selectAnswer) {
						selectAnswer += ',' + item.optionLetter;
					} else {
						selectAnswer = item.optionLetter;
					}
				});
				console.log(selectAnswer, 'selectAnswer2');
				this.$Requset({
					url: this.$Api['exam']['submitQuestion'],
					data: {
						token_exam: uni.getStorageSync('examToken'),
						studentId: uni.getStorageSync('studentId'),
						examId: this.pageObj['examId'],
						remainExamSecond: this.pageObj['remainExamSecond'],
						sort: data['sort'],
						questionId: data['questionId'],
						studentAnswer: selectAnswer
					},
					loading: false,
					method: 'POST',
					success: (res) => {
						const { data, status, message } = res;
						if (!status) {
							requestErrorTip('toast', message);
							return;
						}
						if (status === 103) {
							const userInfo = uni.getStorageSync('userInfo');
							const mobile = userInfo['mobile'];
							loginExam(mobile, () => {
								this.postAnswer();
							});
							return;
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 考试时间倒计时
			countRemainExamSecond() {
				const allTime = this.pageObj['remainExamSecond'];
				const hour = parseInt(allTime / 3600);
				const minute = parseInt((allTime % 3600) / 60);
				const second = allTime % 60;
				this.pageObj['remainExamTime'] = hour +'小时' + minute + '分' + second + '秒';
				setTimeout(() => {
					this.pageObj['remainExamSecond']--;
					this.countRemainExamSecond();
				}, 1000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.question-exam{
		margin-bottom: 190rpx;
		.remain-time{
			line-height: 80rpx;
			font-size: 30rpx;
			color: $color-common;
			text-align: center;
		}
		.type{
			width: 84rpx;
			height: 36rpx;
			line-height: 36rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			border-radius: 7rpx;
			margin-bottom: 30rpx;
		}
		.single{
			background-color: #2176FF;
		}
		.multiple{
			background-color: #14213D;
		}
		.title{
			line-height: 48rpx;
			font-size: 32rpx;
			color: #1A1A1A;
			margin-bottom: 10rpx;
		}
		.options{
			.o-item{
				position: relative;
				line-height: 42rpx;
				font-size: 30rpx;
				color: #7F7F7F;
				background-color: #F7F7F7;;
				padding: 42rpx 20rpx 42rpx 100rpx;
				border-radius: 12rpx;
				margin-bottom: 18rpx;
				.o-item-letter{
					position: absolute;
					top: 50%;
					margin-top: -21rpx;
					left: 36rpx;
					width: 42rpx;
					height: 42rpx;
					line-height: 42rpx;
					font-size: 30rpx;
					color: #7F7F7F;
					border: 1rpx solid #7F7F7F;
					text-align: center;
					border-radius: 50%;
					box-sizing: border-box;
				}
			}
			.selected{
				color: $color-common;
				background-color: #FFF6F0;
				border: 1rpx solid $color-common;
				.o-item-letter{
					color: #FFF;
					background-color: $color-common;
					border: 1rpx solid $color-common;
				}
			}
		}
		.opts{
			position: fixed;
			left: 0;
			bottom: 100rpx;
			box-sizing: border-box;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 28rpx;
			color: #7F7F7F;
			padding: 0 36rpx;
			.previous{
				float: left;
				position: relative;
				padding-left: 30rpx;
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 30rpx;
					height: 90rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 30rpx 30rpx;
					background-image: url(../../static/images/common/arrow-left.png);
				}
			}
			.next{
				float: right;
				position: relative;
				padding-right: 32rpx;
				&::after{
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					width: 30rpx;
					height: 90rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 30rpx 30rpx;
					background-image: url(../../static/images/common/arrow-right.png);
				}
			}
		}
		.popup{
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba($color: #000000, $alpha: 0.6);
			.block{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				margin-bottom: 0;
				.p-header{
					height: 44rpx;
					line-height: 44rpx;
					font-size: 26rpx;
					color: #1A1A1A;
					margin-bottom: 36rpx;
					.menu-icon{
						float: left;
						width: 44rpx;
						height: 44rpx;
						margin-right: 8rpx;
					}
					.close-icon{
						float: right;
						width: 44rpx;
						height: 44rpx;
					}
				}
				.menu-list{
					height: 50vh;
					font-size: 0;
					overflow-y: auto;
					.menu-item{
						display: inline-block;
						width: 92rpx;
						height: 92rpx;
						line-height: 92rpx;
						font-size: 30rpx;
						color: #7F7F7F;
						text-align: center;
						border-radius: 14rpx;
						background-color: #F7F7F7;
						margin-right: 26rpx;
						margin-bottom: 26rpx;
						&:nth-child(6n){
							margin-right: 0;
						}
					}
					.finished{
						color: $color-common;
						background-color: #FFF6F0;
					}
				}
			}
		}
		.footer{
			position: fixed;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			background-color: #FFF;
			padding: 15rpx 36rpx;
			.sequence{
				display: inline-block;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				padding-right: 20rpx;
				.menu-icon{
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
					vertical-align: middle;
				}
			}
			.post-btn{
				float: right;
				width: 254rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #FFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 35rpx;
			}
		}
	}
</style>
